/* Contrast+ — accessibility-focused high-contrast theme
 * Variables only — high contrast, accessibility-first design
 */

html {
  /* Backgrounds */
  --t-bg: #0a0a0a !important;       /* deep black page background */
  --t-bg-2: #1a1a1a !important;     /* secondary backgrounds */
  --t-surface: #1f1f1f !important;  /* post / card surface */
  --t-surface-2: #2a2a2a !important;/* subtle raised surfaces */
  --t-surface-3: #3a3a3a !important;/* hover / emphasis */
  --t-panel: #252525 !important;    /* user info / side panels */

  /* Borders */
  --t-border: #ffffff !important;   /* strong white borders */
  --t-border-soft: #cccccc !important;

  /* Text */
  --t-text: #ffffff !important;     /* pure white main text */
  --t-muted: #e0e0e0 !important;    /* meta, dates */
  --t-faint: #aaaaaa !important;    /* low-priority text */

  /* Links */
  --t-link: #00ddff !important;     /* bright cyan for excellent contrast */
  --t-link-hover: #55eeff !important;

  /* Header / accent strip */
  --t-header-top: #1f1f1f !important;
  --t-header-bottom: #0f0f0f !important;
  --t-header-border: #ffffff !important;

  /* Buttons */
  --t-button-top: #0066ff !important;     /* strong blue */
  --t-button-bottom: #0044cc !important;
  --t-button-hover-top: #3388ff !important;
  --t-button-hover-bottom: #0066ff !important;
  --t-button-border: #ffffff !important;

  /* Legacy row / button helpers */
  --t-row-bg: #1f1f1f !important;
  --t-row-hover: #2a2a2a !important;
  --t-row-unread: #3a2a1a !important;
  --t-btn-bg: #0066ff !important;
  --t-btn-text: #ffffff !important;
  --t-btn-border: #ffffff !important;
  --t-btn-hover: #3388ff !important;
  --t-dropdown-bg: #1f1f1f !important;
  --t-dropdown-hover: #2a2a2a !important;
}

/* Page base / reading background */
html,
html body,
html #Body,
html .Container,
html .Content.MainContent,
html .page-content,
html .pageBox,
html .MessageList.Discussion,
html .Comments.pageBox {
  background: var(--t-bg) !important;
  color: var(--t-text) !important;
}

/* Modern title bar (React header) */
html .titleBar,
html [class*="TitleBar-classes-bg"],
html [class*="TitleBar-classes-bgContainer"],
html [class*="TitleBar-classes-bar"] {
  background: linear-gradient(
    180deg,
    var(--t-header-top) 0%,
    var(--t-header-bottom) 100%
  ) !important;
  border-bottom: 1px solid var(--t-header-border) !important;
}

/* Header nav links */
html [class*="TitleBar-classes-topElement-"] {
  color: var(--t-link) !important;
  background: transparent !important;
}

html [class*="TitleBar-classes-topElement-"]:hover {
  color: var(--t-link-hover) !important;
}

/* Breadcrumbs / section headings */
html .BreadcrumbsBox,
html .Breadcrumbs,
html .PageTitle,
html .pageHeadingBox {
  background: var(--t-surface-2) !important;
  color: var(--t-text) !important;
  border-color: var(--t-border) !important;
}

/* Thread list header & side nav header */
html .forum-threadlist-header,
html .forum-threadlist-header .latest-title,
html .Box.BoxCategories.SideNav .SideNav-header {
  background: linear-gradient(
    180deg,
    var(--t-header-top) 0%,
    var(--t-header-bottom) 100%
  ) !important;
  color: var(--t-text) !important;
  border-bottom: 1px solid var(--t-header-border) !important;
}

/* Thread list rows */
html .forum-threadlist-table th {
  background: var(--t-surface-2) !important;
  color: var(--t-text) !important;
  border-color: var(--t-border-soft) !important;
}

html .forum-threadlist-table tbody td {
  background: var(--t-surface) !important;
  color: var(--t-text) !important;
  border-color: var(--t-border-soft) !important;
}

html .forum-threadlist-table tbody tr:nth-child(even) td {
  background: var(--t-surface-2) !important;
}

/* Meta columns */
html td.forum-threadlist-lastpost,
html td.forum-threadlist-replies,
html td.forum-threadlist-views,
html .forum-threadlist-thread-lastposter,
html .threadbit-lastposter {
  background: var(--t-surface) !important;
  color: var(--t-muted) !important;
  border-color: var(--t-border-soft) !important;
}

/* Post header strip */
html .postbit-header {
  background: var(--t-surface-2) !important;
  color: var(--t-text) !important;
  border-bottom: 1px solid var(--t-border-soft) !important;
}

html .postbit-header a,
html .postbit-header .MItem {
  color: var(--t-text) !important;
  background: transparent !important;
}

/* User info column */
html .postbit-userinfo,
html .postbit-userinfo .userinfo-row,
html .postbit-userinfo .userinfo-joindate,
html .postbit-userinfo .userinfo-posts,
html .postbit-userinfo .RoleTitle,
html .postbit-userinfo .MItem {
  background: var(--t-panel) !important;
  color: var(--t-muted) !important;
  border-color: var(--t-border-soft) !important;
}

html .postbit-userinfo a,
html .postbit-userinfo .userinfo-username-title {
  color: var(--t-link) !important;
}

/* Post body / message content */
html .postbit-postbody,
html .postbit-message,
html .message-wrapper,
html .Item-BodyWrap,
html .Item-Body,
html .Message.userContent,
html .userContent,
html .UserSignature {
  background: var(--t-surface) !important;
  color: var(--t-text) !important;
  border-color: var(--t-border-soft) !important;
}

/* Typography inside posts */
html .Message.userContent p,
html .Message.userContent div,
html .Message.userContent span,
html .Item-Body p,
html .Item-Body div {
  background: transparent !important;
  color: var(--t-text) !important;
}

/* Links, quotes, and code blocks */
html a {
  color: var(--t-link) !important;
}

html a:hover {
  color: var(--t-link-hover) !important;
}

html blockquote,
html pre,
html code,
html [class*="quoteEmbed"],
html [class*="embedContent"] {
  background: var(--t-surface-2) !important;
  color: var(--t-text) !important;
  border: 1px solid var(--t-border-soft) !important;
}

/* Reaction row and footer */
html .Reactions,
html .Reactions > div,
html .Reactions .ReactButton,
html .Reactions .ReactLabel,
html .clearleft {
  background: var(--t-surface) !important;
  color: var(--t-link) !important;
  border-color: var(--t-border-soft) !important;
}

/* New Discussion button & primary actions */
html .Button,
html .Btn,
html .Primary,
html input[type="submit"],
html .ButtonGroup.NewDiscussion,
html div.ButtonGroup[data-is-kludged="true"],
html .BoxButtons .ButtonGroup.Multi {
  background: linear-gradient(
    180deg,
    var(--t-button-top) 0%,
    var(--t-button-bottom) 100%
  ) !important;
  color: var(--t-btn-text) !important;
  border: 1px solid var(--t-button-border) !important;
}

html .Button:hover,
html .Btn:hover,
html .Primary:hover,
html input[type="submit"]:hover {
  background: linear-gradient(
    180deg,
    var(--t-button-hover-top) 0%,
    var(--t-button-hover-bottom) 100%
  ) !important;
}

/* Soften strong box-shadows */
html .MessageList.Discussion,
html .Comments.pageBox,
html .postbit-wrapper {
  box-shadow: none !important;
}

/* ============================================================
   BoardsCleaner extension UI buttons (Sepia)
   ============================================================ */

/* Toggle Profile button */
html #profileToggleBtn {
  background-color: var(--t-button-top) !important;
  color: #2f281d !important;
  border: 1px solid var(--t-button-border) !important;
}

html #profileToggleBtn:hover {
  background-color: var(--t-button-hover-top) !important;
}

/* Info / nav icon buttons in the overlay */
html .infoIcon,
html .navIcon {
  background-color: var(--t-surface-2) !important;
  color: var(--t-text) !important;
  border-color: var(--t-border-soft) !important;
}

/* Shortcut / help dialog */
html dialog#shortcutDialog {
  background: var(--t-surface) !important;
  color: var(--t-text) !important;
  border-color: var(--t-border-soft) !important;
}

/* Edit modal button in forum header */
html #bcEditModalBtn {
  background-color: var(--t-button-top) !important;
  color: #2f281d !important;
  border: 1px solid var(--t-button-border) !important;
}

/* ============================================================
   Legacy nav popup (Sepia)
   ============================================================ */

html #bc-nav-popup-wrap {
  position: relative;
}

html #bc-nav-popup-toggle {
  background: linear-gradient(
    180deg,
    var(--t-button-top) 0%,
    var(--t-button-bottom) 100%
  ) !important;
  color: #2f281d !important;
  border: 1px solid var(--t-button-border) !important;
  border-radius: 4px !important;
  padding: 6px 10px !important;
  cursor: pointer !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}

html #bc-nav-popup-toggle:hover {
  background: linear-gradient(
    180deg,
    var(--t-button-hover-top) 0%,
    var(--t-button-hover-bottom) 100%
  ) !important;
}

html #bc-nav-popup-panel {
  background: var(--t-surface) !important;
  color: var(--t-text) !important;
  border: 1px solid var(--t-border-soft) !important;
  border-radius: 6px !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18) !important;
  padding: 6px !important;
  min-width: 190px !important;
}

html .bc-nav-popup-item,
html #bc-nav-popup-hide-toggle {
  display: block !important;
  width: 100% !important;
  text-align: left !important;
  background: var(--t-surface-2) !important;
  color: var(--t-text) !important;
  border: 1px solid var(--t-border-soft) !important;
  border-radius: 4px !important;
  padding: 8px 10px !important;
  margin: 4px 0 !important;
  cursor: pointer !important;
}

html .bc-nav-popup-item:hover,
html #bc-nav-popup-hide-toggle:hover {
  background: var(--t-surface-3) !important;
  color: var(--t-link) !important;
  border-color: var(--t-border) !important;
}

html #bc-nav-popup-sep {
  height: 1px !important;
  background: var(--t-border-soft) !important;
  margin: 8px 0 !important;
}